<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" dir="ltr"> 
  <head>
    <title>AAL System V. 1.2</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
    <link type="text/css" rel="stylesheet" href="style.css"/>
    <script src="jquery.js"></script>
    <script src="jquery.form.js"></script>
    <script src="sub_property.js"></script>
    <script src="sub_template.js"></script>
    <script src="sub_system.js"></script>
    <script src="main.js"></script>
  </head>

  <body>
  <div id="middle">
      <div><center><span id="error" class="rounded"></span></center></div>

      <div id="menu">
        <div class="menu-item left-rounded menu-item-selected" name="system">System</div>
        <div class="menu-item left-rounded" name="properties">Properties</div>
        <div class="menu-item left-rounded" name="templates">Templates</div>
        <div class="menu-item left-rounded" name="import">Import</div>
      </div>

      <div id="content" class="rounded">

      <div id="system" class="main">
        <div id="systemModifierForm" class="hidden main">
          <form id="systemModifier" action="/modifyAALItem" method="get">
          <span id="systemModifierFormTitle" class="top-rounded aal-title">Modify system entry</span>
          <div class="bottom-rounded aal-content">
            <table>
              <tr>
                <td>new id:</td>
                <td>
                  <input id="aalItemId" name="id" type="text" size="10" maxlength="10"/>
                  <input id="oldalItemId" name="oldId" type="hidden" size="10" maxlength="10"/>
                </td>
                <td>name:</td><td><input id="aalItemName" name="name" type="text" size="30" maxlength="50"/></td>
              </tr>
              <tr>
                <td>Template:</td>
                  <td id="aalItemTemplate">
                  <!-- <input id="aalItemTemplate" name="template" type="text" size="30" maxlength="30"/>-->
                  </td>
                <td>type:</td>
                  <td id="aalItemType">
                  <!-- <input name="type" type="text" size="30" maxlength="30"/> -->
                  </td>
              </tr>
              <tr>
                <td>hotkey:</td><td><input id="aalItemHotkey" name="hotkey" type="text" size="1" maxlength="1"/></td>
                <td>parent:</td>
                <td id="aalItemParent">
                  <!-- <input name="parent" type="text" size="3" maxlength="3"/>  -->
                </td>
              </tr>
              <tr>
                <td>left pos.:</td><td><input id="aalItemLeft" name="left" type="text" size="10" maxlength="10"/></td>
                <td>top pos.:</td><td><input id="aalItemTop" name="top" type="text" size="10" maxlength="10"/></td>
              </tr>
              <tr>
                <td>width:</td><td><input id="aalItemWidth" name="width" type="text" size="10" maxlength="10"/></td>
                <td>height:</td><td><input id="aalItemHeight" name="height" type="text" size="10" maxlength="10"/></td>
              </tr>
              <tr>
                <td colspan="3">&nbsp;</td>
                <td class="left"><input id="aalItemSubmitter" type="submit" value="Create/Update"/></td>
              </tr>
              <tr>
                <td colspan="4">
                  <div id="modifyAALItemResult"></div>
                </td>
              </tr>
            </table>
          </div>
          </form>
        </div>
        <br/>
        <div>
          <span class="top-rounded aal-title">Available system entries</span>
          <div class="bottom-rounded aal-content">
            <table id="AvailableAALitems">
              <tr>
                <th width='5%'>id</th>
                <th width='15%'>name</th>
                <th width='15%'>parent</th>
                <th width='15%'>message type</th>
                <th width='40%'>message</th>
                <th colspan='2' class='action' onclick='createAALItem();'>NEW entry</th>
              </tr>
            </table>
          </div>
        </div>
      </div>


      <div id="properties" class=" hidden main">
        <form id="propertyModifier" action="/modifyProperty" method="get">
        <div id="propertyModifierForm" class="hidden main">
          <span id="propertyModifierFormTitle" class="top-rounded aal-title">Property</span>
          <div class="bottom-rounded aal-content">
            <table>
              <tr>
                <td width='10%'>Name:</td>
                <td width='30%'><input id="propertyName" name="name" type="text" size="30" maxlength="30" readonly="readonly"/></td>
                <td width='10%'>Value:</td>
                <td width='30%' id="propertyValueColumn"></td>
                <td class="right"><input id="propertySubmitter" type="submit" value="Create/Update"/></td>
              </tr>
              <tr>
                <td colspan="4">
                  <div id="modifyPropertyResult"></div>
                </td>
              </tr>
            </table>
          </div>
        </div>
        </form>
        <br/>
        <div>
          <span class="top-rounded aal-title">Available properties</span>
          <div class="bottom-rounded aal-content">
            <table id="AvailableProperties">
              <tr>
                <th width='30%'>Name</th>
                <th width='30%'>Type</th>
                <th width='30%'>Value</th>
                <th width='50px;'>&nbsp;</th>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <div id="templates" class="hidden main">
        <form id="templateModifier" action="/modifyTemplate" method="get">
          <div id="templateModifierForm" class="hidden main">
            <span id="templateModifierFormTitle" class="top-rounded aal-title">Modify template</span>
            <div class="bottom-rounded aal-content">
              <table>
                <tr>
                  <td width="15%">name:</td>
                  <td width="20%">
                  	<input id="templateName" name="name" type="text" size="30" maxlength="30"/>
				    <input id="oldTemplateName" name="oldName" type="hidden" size="30" maxlength="30"/>
                  </td>
                  <td width="15%">unit:</td><td width="20%"><input id="templateUnit" name="unit" type="text" size="10" maxlength="10"/></td>
                  <td width="10%">value step:</td>
                  <td width="20%"><input id="templateStep" name="step" type="text" size="10" maxlength="10"/></td>
                </tr>
                <tr>
                  <td>min value:</td><td><input id="templateMinValue" name="minValue" type="text" size="10" maxlength="10"/></td>
                  <td>max value:</td><td><input id="templateMaxValue" name="maxValue" type="text" size="10" maxlength="10"/></td>
                  <td>template image</td>
                  <td id="templateImageComboCell"></td>
                </tr>
                <tr>
                  <td>min name:</td><td><input id="templateMinName" name="minName" type="text" size="30" maxlength="30"/></td>
                  <td>max name:</td><td><input id="templateMaxName" name="maxName" type="text" size="30" maxlength="30"/></td>
                  <td rowspan="3"></td>
                  <td rowspan="3" id="templateImagePreviewCell"></td>
                </tr>
                <tr>
                  <td>switch on name:</td><td><input id="templateSwitchOnName" name="switchOnName" type="text" size="30" maxlength="30"/></td>
                  <td>switch off name:</td><td><input id="templateSwitchOffName" name="switchOffName" type="text" size="30" maxlength="30"/></td>
                </tr>
                <tr>
                  <td>increase name:</td><td><input id="templateIncreaseName" name="increaseName" type="text" size="30" maxlength="30"/></td>
                  <td>decrease name:</td><td><input id="templateDecreaseName" name="decreaseName" type="text" size="30" maxlength="30"/></td>
                </tr>
                <tr>
                  <td colspan='6' class="right">
                    <input id="templateSubmitter" type="submit" value="Create/Update"/>
                  </td>
                </tr>
                <tr>
                  <td colspan="6">
                    <div id="modifyTemplateResult"></div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </form>

        <form id="templateImageFileUpload" action="/uploadTemplateImage" method="post" enctype="multipart/form-data">
          <div id="templateImageFileUploadForm" class="hidden main">
            <span class="top-rounded aal-title">Template image file upload</span>
            <div class="bottom-rounded aal-content">
              <table>
                <tr>
                  <td>File:</td>
                  <td><input id="templateImageFileUploadFileChooser" name="importFile" type="file" /></td>
                  <td class="right">
                    <input id="templateImageFileUploadSubmitter" type="submit" value="Absenden" />
                  </td>
                </tr>
                <tr>
                  <td colspan="3">
                    <div id="templateImageFileUploadResult"></div>
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </form>

        <br/>
        <div>
          <span class="top-rounded aal-title">Available templates</span>
          <div class="bottom-rounded aal-content">
            <table id="AvailableTemplates">
              <tr>
                <th width='20%'>name</th>
                <th width='10%'>min value</th>
                <th width='10%'>min name</th>
                <th width='10%'>max value</th>
                <th width='10%'>max name</th>
                <th width='10%'>unit</th>
                <th>template image</th>
                <th>&nbsp;</th>
                <!--<th colspan='2' class='action' onclick='createTemplate();'>NEW template</th>-->
              </tr>
            </table>
          </div>
        </div>
        <br/>
        <div  class="hidden main">
          <span class="top-rounded aal-title">Available template images</span>
          <div class="bottom-rounded aal-content">
            <table id="AvailableTemplateImages">
              <tr>
                <th width='20%'>name</th>
                <th width='50%'>date</th>
                <th width='20%'>&nbsp;</th>
                <th class='action' onclick='createTemplate();'>NEW image</th>
              </tr>
            </table>
          </div>
        </div>
      </div>

      <!--http://www.sili.at/json-echo.php-->
      <form id="svgFileUpload" action="/uploadSvgFile" method="post" enctype="multipart/form-data">
      <div id="import" class="hidden main">
        <div>
          <span class="top-rounded aal-title">Upload new svg file</span>
          <div class="bottom-rounded aal-content">
            <table>
              <tr>
                <td>File:</td>
                <td><input id="svgFileUploadFileChooser" name="importFile" type="file" /></td>
                <td class="right">
                  <input id="svgFileUploadSubmitter" type="submit" value="Absenden" />
                </td>
              </tr>
              <tr>
                <td colspan="3">
                  <div id="svgFileUploadResult"></div>
                </td>
              </tr>
            </table>
          </div>
        </div>
        <br/>
        <div>
          <span class="top-rounded aal-title">Import</span>
          <div class="bottom-rounded aal-content">
            <table id="AvailableUploadedFiles">
              <tr>
                <th width='60%'>name</th>
                <th width='30%'>date</th>
                <th>&nbsp;</th>
                <th>&nbsp;</th>
              </tr>
              <tr>
                <td colspan="4">
                  <div id="importSvgFileResult"></div>
                </td>
              </tr>
            </table>
          </div>
        </div>
      </div>
      </form>

    </div>
  </div>

  <div id="messages" class="messages">
    <span class="top-rounded aal-title">Messages</span>
    <div>
      <div class="bottom-rounded aal-content">
        <div class="message-list" id="msgHistory">
        </div>
      </div>
    </div>
  </div>

  <div id="footer">
    Copyright &copy; 2011 by Miroslav Sili
  </div>

  </body>
</html>
